<template>
  <div>
    <!-- 返回按钮 -->
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="搜索"
    ></van-nav-bar>
    <!-- 结束 -->
    <van-search
      v-model="value"
      action-text
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      input-align="center"
      background="#fff"
    >
      <template #left-icon>
        <!-- <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <van-button type="primary">浅色风格</van-button>
          </template>
        </van-popover> -->
        <div>
          <select v-model="classify" class="select-option">
            <option value="1">驾校</option>
            <option value="2">教练</option>
            <option value="3">新闻资讯</option>
          </select>
        </div>
      </template>
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <!-- <van-popover
      v-model="showPopover"
      trigger="click"
      :actions="actions"
      @select="onSelect"
    >
      <template #reference>
        <van-button type="primary">浅色风格</van-button>
      </template>
    </van-popover> -->

    <!-- 当选择是驾校时，classify是1，则展现驾校列表 -->
    <div class="search-history" v-if="classify === '1'">
      <van-cell
        center
        v-for="(item, i) in lists"
        :key="i"
        @click="href('/SchoolDetail', item.id)"
      >
        <template #icon>
          <img :src="item.imgtx" class="school-pic" alt />
        </template>
        <template #title>
          <div class="sch-heads">
            <div class="sch-name">{{ item.name }}</div>
            <img src="../../assets/ver-icon.png" alt />
          </div>
          <div class="sch-body justify">
            <div class="sch-left">
              <div class="sch-raty">
                <van-rate
                  v-model="item.xj"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
                  readonly
                />
                <!-- <span class="nn">{{ item.xj }}条</span> -->
              </div>
              <div class="sch-price-box">
                <div class="sch-price">¥{{ item.bmf }}</div>
                <div class="sch-ke">{{ item.bj }}</div>
              </div>
            </div>
            <div class="sch-loc">
              <div class="sch-area">{{ item.region }}</div>
              <div class="sch-dist">{{ item.juli | numFilter }}km</div>
            </div>
          </div>
          <div class="sch-tags">
            <van-tag v-if="item.kczzis === '1'" type="primary"
              >自有考场</van-tag
            >
            <van-tag v-if="item.ptssis === '1'" type="primary"
              >班车接送</van-tag
            >
          </div>
        </template>
      </van-cell>
    </div>
    <!-- 结束 -->

    <!-- 当选择是教练时，classify是2，则展现教练列表 -->
    <div class="search-history" v-if="classify === '2'">
      <van-cell v-for="(item, i) in jiaolian" :key="i">
        <template #icon>
          <div class="coach-grid">
            <div class="nn-icon" v-if="i == 0">
              <img src="../../assets/n1.png" alt />
            </div>
            <div class="nn-icon" v-else-if="i == 1">
              <img src="../../assets/n2.png" alt />
            </div>
            <div class="nn-icon" v-else-if="i == 2">
              <img src="../../assets/n3.png" alt />
            </div>
            <div class="nn" v-else>{{ i + 1 }}</div>
            <img :src="item.photo" class="p-avatar" alt />
          </div>
        </template>
        <template #title>
          <div @click="href('/CoachDetail', item.drillId, item.jgbh)">
            <div class="pl-heading">
              <div class="pl-name">{{ item.name }}</div>
              <div class="pl-age">{{ item.jl }}年教龄</div>
            </div>
            <van-rate
              v-model="item.xj"
              readonly
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <div class="pl-price">{{ item.feiyong }}元/小时</div>
            <div class="pl-desc">{{ item.inscodename }}</div>
          </div>
        </template>
        <template #right-icon>
          <div class="right-cell">
            <i @click="callPhone(item.phone)" class="iconfont van-icon-tel"></i>
            <p>{{ item.jl }}km</p>
          </div>
        </template>
      </van-cell>
    </div>
    <!-- 结束 -->

    <!-- 当选择是新闻资讯时，classify是3，则展现资讯列表 -->
    <div class="search-history" v-if="classify === '3'">
      <div
        class="news-cell"
        style="padding:10px 16px"
        v-for="(item, i) in policy"
        :key="i"
        @click="href('/NewsDetail', item.id)"
      >
        <!-- <img class="news-img" :src="item.picaddress" alt /> -->
        <div>
          <div class="news-text">{{ item.title }}</div>
          <!-- <van-row :gutter="20">
                      <van-col :span="8" v-for="(subitem, i) in item.img" :key="i">
                        <img :src="baseURL + subitem.img" alt />
                      </van-col>
          </van-row>-->
          <div class="news-attr">
            <span>{{ item.institution }}</span>
            <span>阅读 {{ item.djl }}</span>
            <span>{{ item.createTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 结束 -->
  </div>
</template>

<script>
/**
 * 引入提示功能
 */
import { Toast } from "vant";
import { baseURL } from "../../assets/js/config";
import { globalSSearch } from "../../assets/js/api/apply";
export default {
  name: "Scarch",
  data() {
    return {
      value: "",
      classify: "1",
      lists: [], // 当type是1时，查找驾校
      jiaolian: [], // 当type是2时，查找教练
      policy: [], // 当type是3时，查找新闻资讯
      baseURL: "",
      precision: null, // 精度
      dimensionality: null // 维度
      //   showPopover: false,
      //   // 通过 actions 属性来定义菜单选项
      //   actions: [{ text: "选项一" }, { text: "选项二" }, { text: "选项三" }]
    };
  },

  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
    this.baseURL = baseURL;
  },

  methods: {
    // onSelect(action) {
    //   Toast(action.text);
    // },
    /**
     * 当点击搜索的时候触发的
     */
    onSearch() {
      // 类型默认的是驾校，当搜索内容是空的时候，提示内容
      if (this.value == "") {
        Toast("请输入搜索内容");
        return;
      }
      // console.log(this.classify);
      // console.log(this.value);
      let obj = {
        type: this.classify,
        keyWord: this.value,
        jd: this.precision,
        wd: this.dimensionality
      };
      globalSSearch(obj).then(res => {
        // console.log(res);
        if (this.classify == "1") {
          this.lists = res.data;
        } else if (this.classify == "2") {
          this.jiaolian = res.data;
        } else if (this.classify == "3") {
          this.policy = res.data;
        }
      });
    },

    href(url, lid, id) {
      if (id) {
        this.$router.push({
          path: `${url}/${lid}/${id}`
        });
      } else {
        this.$router.push({ path: `${url}/${lid}` });
      }
    },

    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style></style>
